<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/global.css">
    <title>用户内容页</title>
    <style>
        .tabs-consult > div {
            position: relative;            
            min-height: 380px; 
        }
        .tabs-consult > div .page {
            position: absolute; 
            bottom: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- 页头 -->
    <div class="header">
        <div class="header-top">
            <div class="container d-flex justify-content-between align-items-center">
                <div class="datebar text-light"></div>
                <ul class="toolsnav">
                    <li class="toolsnav__item"><a href="javascript:kqNav()">无障碍浏览</a>|</li>
                    <li class="toolsnav__item">
                        <a href="javascript:void(0)">政务微信</a>|
                        <img src="../img/weibo.png" alt="微信">
                    </li>
                    <li class="toolsnav__item">
                        <a href="javascript:void(0)">政务微博</a>|
                        <img src="../img/weibo.png" alt="微博">
                    </li>
                    <li class="toolsnav__item"><a id="js-langBtn" href="javascript:void(0)">繁体中文</a></li>
                    <li class="toolsnav__item">&emsp;</li>
                    <li class="toolsnav__item"><a href="#">登录</a>|</li>
                    <li class="toolsnav__item"><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
        <div class="header-middle">
            <div class="container d-flex justify-content-between align-items-center">
                <img class="logo" src="../img/logo.png" alt="logo">
                <form class="searchbar" action="#">
                    <input class="searchbar__input" type="text" placeholder="请输入要搜索的内容">
                    <button class="searchbar__btn" type="submit">搜索</button>
                </form>
            </div>
        </div>
        <div class="header-bottom">
            <div class="container d-flex align-items-center">
                <ul class="nav">
                    <li class="nav__item">
                        <a href="#">网站首页</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">行业动态</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">政策法规</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">通知公告</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">办事指南</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">新建商品房</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">存量房</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">房屋租赁</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">中介机构</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">咨询投诉</a>
                    </li>
                    <li class="nav__item">
                        <a href="#">单位概括</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main main--user">
        <div class="container">
            <div class="leftside">
                <img class="user__info-avatar" src="holder.js/100x100?text=头像&bg=#FFC107&fg=#fff">
                <div class="user__info-account">账号：18049450912</div>
                <button class="btn btn-block btn-primary btn-sm">退出</button>
            </div>
            <div class="rightside">
                <div class="tabs-consult">
                    <ul>
                        <li class="active"><a href="#tab-1">我的咨询</a></li>
                        <li><a href="#tab-2">我的投诉</a></li>
                    </ul>
                    <div id="tab-1">
                        <table class="table table-bordered table-hover table-sm text-center">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width:50px">编号</th>
                                    <th>标题</th>
                                    <th style="width:100px">提交时间</th>
                                    <th style="width:100px">回复时间</th>
                                    <th style="width:100px">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>内容内容内容内容内容内容内容内容内容内容</td>
                                    <td>2018-05-25</td>
                                    <td>2018-05-25</td>
                                    <td>已回复</td>
                                </tr>
                                <tr>
                                    <th>2</th>
                                    <th>内容内容内容内容内容内容内容内容内容内容</th>
                                    <td>2018-05-25</td>
                                    <td>2018-05-25</td>
                                    <td>已回复</td>
                                </tr>
                            </tbody>
                        </table>
                        <ul class="page">
                            <li class="page__item">总共30记录</li>
                            <li class="page__item"><a href="#">首页</a></li>
                            <li class="page__item"><a href="#">上一页</a></li>
                            <li class="page__item"><a href="#">[1]</a></li>
                            <li class="page__item"><a href="#">[2]</a></li>
                            <li class="page__item"><a href="#">下一页</a></li>
                            <li class="page__item"><a href="#">尾页</a></li>
                            <li class="page__item">当前1/2总页</li>
                        </ul>
                    </div>
                    <div id="tab-2">
                        <table class="table table-bordered table-hover table-sm text-center">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width:50px">编号</th>
                                    <th>标题</th>
                                    <th style="width:100px">提交时间</th>
                                    <th style="width:100px">回复时间</th>
                                    <th style="width:100px">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>内容内容内容内容内容内容内容内容内容内容</td>
                                    <td>2018-05-25</td>
                                    <td>2018-05-25</td>
                                    <td>已回复</td>
                                </tr>
                                <tr>
                                    <th>2</th>
                                    <th>内容内容内容内容内容内容内容内容内容内容</th>
                                    <td>2018-05-25</td>
                                    <td>2018-05-25</td>
                                    <td>已回复</td>
                                </tr>
                                <tr>
                                    <th>3</th>
                                    <th>内容内容内容内容内容内容内容内容内容内容</th>
                                    <td>2018-05-25</td>
                                    <td>2018-05-25</td>
                                    <td>已回复</td>
                                </tr>
                            </tbody>
                        </table>
                        <ul class="page">
                            <li class="page__item">总共30记录</li>
                            <li class="page__item"><a href="#">首页</a></li>
                            <li class="page__item"><a href="#">上一页</a></li>
                            <li class="page__item"><a href="#">[1]</a></li>
                            <li class="page__item"><a href="#">[2]</a></li>
                            <li class="page__item"><a href="#">下一页</a></li>
                            <li class="page__item"><a href="#">尾页</a></li>
                            <li class="page__item">当前1/2总页</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <p>榆林市房地产交易管理所版权所有</p>
        <p>陕ICP备12345678号-1&emsp;Email：349511163@qq.com&emsp;电话：0912-1234567</p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.4/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.tabslet.js/1.7.3/jquery.tabslet.min.js"></script>
    <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
    <script src="../js/chinese.js"></script>
    <script src="../js/toolbar.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript">
        $('.tabs-consult').tabslet({
            mouseevent: 'hover'
        });
    </script>
</body>

</html>